<template>
    <div class="container">
        <a-spin :spinning="loading">
            <a-form layout="inline">
                <a-form-item label="分类" :colon="false">
                    <a-select :default-value="''" style="width: 240px" v-model="category" @change="onCategoryChange" allowClear placeholder="请选择分类">
                        <a-select-option v-for="(v, k) in categorys" :key="k" :value="v.id">{{ v.name }}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
            <a-list item-layout="vertical" :data-source="list" :locale="{emptyText: '暂无数据'}">
                <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta>
                        <a slot="title" @click="openBlogPage(item.url ? item.url : item.id)">
                            <a-tag>{{ item.category_name }}</a-tag>
                            {{ item.title }}
                        </a>
                        <div slot="description">
                            {{ item.create_time }}
                        </div>
                    </a-list-item-meta>
                    <div slot="extra" class="list-menu">
                        <a-button class="list-menu-btn" style="width: 150px;" @click="openBlogPage(item.url ? item.url : item.id)">在博客中显示</a-button>
                        <div style="margin-top: 5px; width: 150px; display: flex; flex-direction: row; justify-content: space-between;">
                            <a-button type="primary" class="list-menu-btn" style="width: 70px;" @click="onEditClick(item.id)">编辑</a-button>
                            <a-popconfirm
                                title="确认要删除这篇文章？"
                                ok-text="是"
                                cancel-text="不"
                                @confirm="commitDelete(item.id)"
                            >
                                <a-button type="danger" class="list-menu-btn" style="width: 70px;">删除</a-button>
                            </a-popconfirm>
                        </div>
                    </div>
                </a-list-item>
            </a-list>
            <a-pagination
                size="small"
                :total="total"
                v-model="page"
                :pageSize="limit"
                hideOnSinglePage
                @change="getList"
                :item-render="(current, type, originalElement) => {
                    if (['prev', 'next'].includes(type)) {
                        return '';
                    } else {
                        return originalElement;
                    }
                }"
            />
        </a-spin>
    </div>
</template>
<script>
import { getBlogList, getCategoryList, deleteBlog } from '@/api/blog.js'
import { openBlogPage } from '@/utils/url'
export default {
    name: 'Blogs',
    data() {return {
        list: [],
        categorys: [],
        page: 1,
        limit: 7,
        total: 0,
        category: undefined,
        loading: false,
        longPic: {
            loading: false,
            show: false
        },

        // 页面js统一，下面是移动端的变量
        categoryPickerShow: false
    }},
    created() {
        this.getCategoryList(() => {
            if (this.$route.query.id) {
                this.category = this.$route.query.id
            }
            this.getList()
        })
    },
    mounted() {

    },
    methods: {
        commitDelete(id) {
            this.loading = true
            deleteBlog({id: id}).then(res => {
                this.loading = false
                this.getList()
            }).catch(e => {
                this.loading = false
                this.$message.error(e.msg)
            })
        },
        onEditClick(id) {
            this.$router.push({
                path: '/blog/new',
                query: {
                    id: id
                }
            })
        },
        openBlogPage(id) {
            openBlogPage(id)
        },
        onCategoryChange(e) {
            if (e == undefined) {
                window.location.hash = '/blog/blogs'
            }
            this.getList()
        },
        getList() {
            const d = {
                page: this.page,
                limit: this.limit
            }
            if (this.category > 0) {
                d.category = this.category
            }
            this.loading = true
            getBlogList(d).then(res => {
                this.loading = false
                this.list = res.data.data
                this.total = res.data.count
            }).catch(e => {
                this.loading = false
                console.error(e)
                this.$message.error(e.msg)
            })
        },
        getCategoryList(cb) {
            getCategoryList().then(res => {
                this.categorys = res.data
                cb && cb()
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    padding: 40px 0 0 20px;
}
.list-menu {
    margin-right: 10px;
}
.ant-pagination-next {
    display: none !important;
}
</style>


